<route lang="jsonc" type="page">
    {
      "layout": "default",
      "style": {
        "navigationBarTitleText": "选择患者"
      }
    }
    </route>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { getFamilyMembers, deleteFamilyMember as deleteMember} from '@/api/family';
import type { IFamilyMember } from '@/api/types/family';
import {onShow} from '@dcloudio/uni-app';
// 家庭成员列表数据
const familyMembers = ref<IFamilyMember[]>([]);
// 添加选中患者ID的响应式变量
const selectedPatientId = ref<string | null>(null);

// 身份证号码中间6位加密函数
const encryptIdCard = (idCard: string): string => {
  if (!idCard || idCard.length !== 18) return idCard;
  // 保留前6位和后4位，中间6位用*代替
  return idCard.substring(0, 6) + '******' + idCard.substring(12);
};

// 打开添加患者页面
const openAddDrawer = () => {
  uni.navigateTo({
    url: '/pages/familyaddedit/familyaddedit'
  });
};

// 打开编辑患者页面
const openEditDrawer = (member: IFamilyMember) => {
  uni.navigateTo({
    url: '/pages/familyaddedit/familyaddedit',
    success: function(res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit('editData', {
        isEdit: true,
        patientInfo: member
      });
    }
  });
};

// 加载家庭成员数据
const loadFamilyMembers = async () => {
  try {
    const res = await getFamilyMembers();
    if (res.code === 10000) {
      // 确保数据正确解析
      familyMembers.value = (res.data || []).map(member => ({
        ...member,
        // 确保isDefault是布尔值
        isDefault: Boolean(member.isDefault || member.default || member.defaultFlag)
      }));
      
      console.log('处理后的家庭成员数据:', familyMembers.value);
      
      // 检查是否有默认就诊人
      const hasDefault = familyMembers.value.some(member => member.isDefault);
      console.log('是否有默认就诊人:', hasDefault);
    } else {
      uni.showToast({
        icon: 'none',
        title: res.msg || '获取家庭成员失败'
      });
    }
  } catch (error) {
    console.error('获取家庭成员失败:', error);
    uni.showToast({
      icon: 'none',
      title: '网络错误，请稍后重试'
    });
  }
};

// 页面加载时获取数据
onMounted(() => {
  loadFamilyMembers();
});
onShow(() => {
  // 确保每次显示页面时都重新加载数据
  loadFamilyMembers();
});

// 选择患者处理函数
const selectPatient = (id: string) => {
  selectedPatientId.value = id;
};

const goTopayment=()=>{
  if (!selectedPatientId.value) {
    uni.showToast({
      icon: 'none',
      title: '请先选择患者'
    });
    return;
  }

// 查找选中的患者信息
  const selectedPatient = familyMembers.value.find(member => member.id === selectedPatientId.value);
  if (!selectedPatient) {
    uni.showToast({
      icon: 'none',
      title: '未找到选中的患者信息'
    });
    return;
  }

  // 将患者信息保存到本地存储
    uni.setStorageSync('patientInfo', selectedPatient);
    console.log('患者信息已保存到本地存储:', selectedPatient);
  
  uni.navigateTo({
    url:'/pages/payment/payment'
  })
}
</script>

<template>
  <view class="family-container">
    <view>
        <view style="font-size: 14px;">请选择患者信息</view>
        <view style="font-size: 12px;padding-top:10rpx;padding-bottom:30rpx;">以便医生给出更准确的治疗，信息仅医生可见</view>
    </view>
    <!-- 家庭成员列表 -->
    <view class="member-list">
      <view v-for="member in familyMembers" :key="member.id" class="member-item" :class="{ 'selected': selectedPatientId === member.id }" 
        @click="selectPatient(member.id)">
        <view class="member-info">
          <view class="member-name-container">
            <view class="member-name">{{ member.name }}</view>
            
          <view class="member-idcard">{{ encryptIdCard(member.idCard) }}</view>
          </view>
         <view class="member-detail-container">
             <view class="member-detail">{{ member.genderValue }} · {{ member.birthday }}</view>
          <view class="meber-age">{{member.age}}岁</view>
         </view>
        </view>
        <view style="margin-top:50rpx;margin-right:20rpx" @tap="openEditDrawer(member)">
            <img src="/static/image/bianji.png" alt="" width="15rpx" height="15rpx">
        </view>
        <view class="default-tag" v-if="member.isDefault">默认</view>
      </view>
    </view>

    <!-- 添加家庭成员按钮 -->
    <view class="add-btn" @tap="openAddDrawer">
      <view class="add-icon">+</view>
      <view class="add-text">添加患者</view>
    </view>

    <!-- 提示信息 -->
    <view v-if="familyMembers.length === 0" class="empty-tip">
      暂无家庭成员信息
    </view>
    <view class="max-tip">最多可添加6人</view>
    <view class="next-btn">
        <button class="butsi" @click="goTopayment">下一步</button>
    </view>
  </view>
  
</template>

<style lang="scss" scoped>
.family-container {
  padding: 20rpx;
  box-sizing: border-box;
  min-height: 100vh;
  border-top: 1px solid #f0f0f0;
}

.member-list {
  margin-bottom: 120rpx;
}

.member-item {
  display: flex;
  padding: 25rpx;
  margin-bottom: 20rpx;
  background-color: #f6f7f9;
  border-radius: 14rpx;
  transition: all 0.3s ease;
}

// 添加选中样式
.member-item.selected {
  background-color: #eaf8f6;
  border: 2rpx solid #11c1a2;
  box-shadow: 0 4rpx 10rpx rgba(17, 193, 162, 0.2);
//   display: inline;
}

.member-info {
  flex: 1;
}

.member-name {
    width: 58px;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.member-idcard {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
  margin-left: 20rpx;
  margin-top: 6rpx;
}

.member-detail {
  font-size: 24rpx;
  color: #999;
  margin-top: -15rpx;
}
.meber-age{
    font-size: 24rpx;
  color: #999;
  margin-top: -16rpx;
  margin-left: 20rpx;
}
.member-name-container{
    display: flex;
    justify-content: left;
    padding: 20rpx;
    position: relative;
}
.default-tag {
    position: absolute;
    width: 80rpx;
    height: 40rpx;
    right: 100rpx;
    background-color: #11c1a2;
    color: white;
    font-size: 24rpx;
    padding: 4rpx 12rpx;
    margin-right: 25rpx;
    margin-top: 23rpx;
    text-align: center;
}
.member-detail-container{
    display: flex;
    justify-content: left;
    padding:15rpx 20rpx;
}

.add-btn {
//  display: flex;
  padding: 25rpx;
  margin-bottom: 40rpx;
  background-color: #f6f7f9;
  border-radius: 14rpx;
  height: 80px;
  margin-top: -90rpx;
}

.add-icon {
  font-size: 75rpx;
  margin-right: 10rpx;
  color: #11c1a2;
  text-align: center;
}
.add-text{
    color: #11c1a2;
    text-align: center;
    font-size: 33rpx;
}

.empty-tip {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 28rpx;
}

.max-tip {
//   text-align: center;
  color: #999;
  font-size: 26rpx;
  margin-top: 20rpx;
}
.butsi{
    position: fixed;
    width: 680rpx;
    height: 80rpx;
    background-color: #11c1a2;
    color: white;
    font-size: 32rpx;
    border-radius: 40rpx;
    left: 35rpx;
    bottom: 20rpx;
}

.next-btn{
  position: fixed;
  background-color: #fff;
  width: 100vw;
  height: 90rpx;
    bottom: 20rpx;
}
</style>